<template>
	<view class="hbh_God">
		<view class="hbh_sex">
			<view class="hbh_move">
				<view :class="['person',item.flag?'light':'']" v-for="(item,index) in arr" :key="index"
					@click="handle(item,index)">
					{{item.text}}
				</view>
				<view class="move_box" :style="{left:left}">

				</view>
			</view>
		</view>
		<view class="hbh_swiper">
			<swiper class="swiper" :current="current" circular :duration="duration" @change="swiperChange">
				<swiper-item>
					<view class="swiper-item">
						<txtNovelStore></txtNovelStore>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<searchBookChild :list="manList"></searchBookChild>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import searchBookChild from "@/components/searchBookChild/searchBookChild.vue"
	import txtNovelStore from "@/components/txtNovelStore/txtNovelStore.vue"
	export default {
		data() {
			return {
				arr: [{
					text: 'txt下载阅读库',
					flag: true,
					left: '80rpx'
				}, {
					text: '在线阅读库',
					flag: false,
					left: 'calc(50% + 80rpx)'
				}],
				left: '80rpx',
				duration: 500,
				current: 0,
				manList: [{
					text: "奇幻玄幻",
					classify_id: 10001,
					flag: true
				}, {
					text: "武侠仙侠",
					classify_id: 10002,
					flag: false
				}, {
					text: "历史军事",
					classify_id: 10003,
					flag: false
				}, {
					text: "悬疑灵异",
					classify_id: 10007,
					flag: false
				}, {
					text: "都市娱乐",
					classify_id: 10004,
					flag: false
				}, {
					text: "竞技同人",
					classify_id: 10005,
					flag: false
				}, {
					text: "科幻游戏",
					classify_id: 10006,
					flag: false
				}, {
					text: "评论文集",
					classify_id: 10008,
					flag: false
				}, {
					text: "其他",
					classify_id: 10009,
					flag: false
				}, {
					text: "全部搜索",
					classify_id: "",
					flag: false
				}]
			};
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false
			}
			this.back();
			return true
		},
		components: {
			searchBookChild,
			txtNovelStore
		},
		methods: {
			...mapMutations(["home/rushHomeTxtBox"]),
			back(){
				this["home/rushHomeTxtBox"]()//返回通知刷新
				uni.navigateBack()
			},
			handle(item, index) {
				this.current = index
				this.arr.map(item => item.flag = false)
				item.flag = true
				this.left = item.left
			},
			swiperChange(e) {
				this.current = e.detail.current
				this.arr.map(item => item.flag = false)
				let obj = this.arr[e.detail.current]
				obj.flag = true
				this.$set(this.arr, e.detail.current, obj)
				this.left = obj.left
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hbh_God {
		height: 100vh;
		background-color: #fff;

		.hbh_swiper {
			height: calc(100% - 70rpx);

			.swiper {
				height: 100%;

				.swiper-item {
					height: 100%;
				}
			}
		}

		.hbh_sex {
			height: 70rpx;
			display: flex;
			justify-content: center;

			.hbh_move {
				height: 100%;
				display: flex;
				position: relative;

				.person {
					width: 200rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
				}

				.light {
					color: green;
				}

				.move_box {
					position: absolute;
					bottom: 0rpx;
					height: 10rpx;
					width: 40rpx;
					border-radius: 5rpx;
					background-color: green;
					transition: left .5s ease;
				}
			}

		}
	}
</style>